<template>
  <div class="row">
    <!-- 首页 -->
    <div v-show="scene == 0">
      <h1>欢迎来到github网站</h1>
    </div>
    <!-- 加载 -->
    <div v-show="scene == 1">loading.....</div>
    <!-- 每一个Card即为一个用户信息 -->
    <div
      v-show="scene == 2"
      class="card"
      v-for="(item, index) in list"
      :key="item.id"
    >
      <a :href="item.html_url">
        <img :src="item.avatar_url" style="width: 100px" />
      </a>
      <p class="card-text">{{ item.login }}</p>
    </div>
    <!-- 失败 -->
    <div v-show="scene == 3">
      <h1>获取数据失败-404</h1>
    </div>
  </div>
</template>

<script>
//由于axios二次封装这么引入不行:import axios from 'axios' ----请求、响应拦截器
//引入自己二次封装axios
import requests from "@/api/request";
export default {
  name: "",
  data() {
    return {
      //当前组件一个属性,用来存储将来服务器返回用户信息
      list: [],
      scene: 0, //0代表首页  1加载    2:用户信息  3:失败情况
    };
  },
  //Footer组件：当组件挂载完毕获取$bus,绑定一个自定义事件！！！
  mounted() {
    //绑定事件
    //params形参:即为文本框输入的内容,发请求获取搜索的数据进行展示！！！
    this.$bus.$on("keyword", async (p) => {
      //对象写法:
      //第一种:Promise对象:pendding、成功、失败  await 等待是这一次异步语句 成功的接口
      // let result = await axios.get(`/taidi/search/users?q=${p}`);
      // let result  = await axios.get('/taidi/search/users',{params:{q:p}});
      //函数写法:
      // let result = await axios({
      //   url: "/taidi/search/users",
      //   method: "get",
      //   params: { q: p },
      // });

     //发请求之前,获取数据之前加载....
      this.scene = 1;
      //这里不需要加taidi,因为requests这个axios配置项配置了baseURL
      try {
        //请求成功干什么
        let result = await requests.get(`/search/users?q=${p}`);
        this.list = result.items;
        //显示用户信息
        this.scene = 2;
      } catch (error) {
        //请求失败干什么地方
        alert('请求失败');
        this.scene =3;
      }
    });
  },
};
</script>

<style scoped>
</style>
